<template>
    <div class="notification-list">
      <div class="title">通知中心</div>
      <el-scrollbar max-height="300px">
        <div 
          v-for="(item, index) in notifications" 
          :key="index"
          class="notification-item"
        >
          <el-icon :color="item.typeColor" class="icon">
            <component :is="item.icon" />
          </el-icon>
          <div class="content">
            <div class="message">{{ item.message }}</div>
            <div class="time">{{ item.time }}</div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </template>
  
  <script setup>
  import { ref, markRaw } from 'vue'
  import {
    BellFilled,
    Check,
    Warning,
    CircleCloseFilled
  } from '@element-plus/icons-vue'
  
  // 模拟通知数据
  const notifications = ref([
    {
      type: 'success',
      icon: markRaw(Check),
      message: '库存同步成功',
      time: '5分钟前',
      typeColor: '#67C23A'
    },
    {
      type: 'warning',
      icon: markRaw(Warning),
      message: '有3件商品库存不足',
      time: '2小时前',
      typeColor: '#E6A23C'
    },
    {
      type: 'error',
      icon: markRaw(CircleCloseFilled),
      message: '订单处理失败',
      time: '5小时前',
      typeColor: '#F56C6C'
    }
  ])
  </script>
  
  <style lang="scss" scoped>
  .notification-list {
    padding: 10px;
  
    .title {
      font-weight: 600;
      margin-bottom: 10px;
      padding-bottom: 5px;
      border-bottom: 1px solid var(--el-border-color);
    }
  
    .notification-item {
      display: flex;
      gap: 12px;
      padding: 10px;
      transition: background 0.3s;
      cursor: pointer;
  
      &:hover {
        background: var(--el-color-primary-light-9);
      }
  
      .icon {
        font-size: 20px;
        margin-top: 4px;
      }
  
      .content {
        flex: 1;
        .message {
          font-size: 13px;
          line-height: 1.5;
        }
        .time {
          font-size: 12px;
          color: var(--el-text-color-secondary);
          margin-top: 4px;
        }
      }
    }
  }
  </style>